<template>
  <div class="xiaoli">
    <!-- 此处编写结构 -->
    <h2>姓名：{{ personName }}</h2>
    <h2>年龄：{{ personAge }}</h2>
    <button @click="showGender">点我看性别</button>
  </div>
</template>

<script>
  // 此处写脚本
  export default {
    name:'Person',
    data() {
      return {
        personName:'张三',
        personAge:18,
        gender:'男'
      }
    },
    methods: {
      showGender(){
        alert(this.gender)
      }
    },
  }
</script>

<style scoped>
  /* 此处写样式 */
  .xiaoli {
    margin-top: 10px;
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>